<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>那是我梦开始的地方</title>
    <script src="js/jquery-3.0.0.js"></script>
    <style>
        .center_idv{
            margin: 0px auto;
            max-width: 1000px;
        }
        #article_source{
            width: 30px;
            font-size: 2em;
            float: left;
        }
        #tags{
            margin: 0px 50px;
            width: 100%;
        }
        #choice_tags{
            width: 100%;
            font-size: 1.5em;
        }

        li{
            text-decoration: none;
        }
        #tagDataList{
            position: relative;
            left: 50px;
            top: 0px;
            float: left;
            width: 200px;
            background-color: gray;
        }
        #editor{
            width: 500px;
            height: 600px;
            border: 1px solid darkgray;
        }
        /*弹出窗口*/
        .win_background{
            /*display: none;*/
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            background-color: gray;
        }
        .transparent_class {
            filter:alpha(opacity=50);
            -moz-opacity:0.5;
            -khtml-opacity: 0.5;
            opacity: 0.3;
        }
        #window_panel{
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            border: 1px solid red;
            opacity: 1;
        }
        #window{
            top: 100px;
            margin: 100px auto;
            height: 400px;
            width: 600px;
            /*border: 1px red solid;*/
            background-color: white;
            /*添加阴影*/
            border: none;
            overflow: hidden;
            /*/*/
            box-shadow: 0 5px 15px rgba(0,0,0,.5);

        }
        #win_head{
            background-color: #f4f4f4;
            height: 25px;
        }
        #win_title{
            padding-left: 5px;
            line-height: 25px;
            font-size: 14px;
            float: left;
        }
        #win_close{
            float: right;
            line-height: 16px;
            margin: 3px 3px;
            text-decoration: none;
            color: black;
        }
        #win_close:hover{
            margin: 3px 3px;
            text-decoration: none;
            color: white;
            background-color: #ff8987;
            border-radius: 100%;
        }

        /*窗体内容 css*/
        #win_body{
         padding: 0px 20px;
        }
        #tag_add_name{
            margin-top: 20px;
            line-height: 20px;
            width: 100%;
        }
        #tag_add_desc{

            margin-top: 10px;
            width: 100%;
            height: 230px;
            resize: none;
        }
        button{
            line-height: 20px;
            letter-spacing: 2px;
            border-radius: 5px;
            border:1px black solid;
        }
        #tag_add_cancel{
            background-color: white;
            margin: 10px 20px;
            float: right;
        }
        #tag_add_confirm{
            background-color: #4784d8;
            color: white;
            margin: 10px 30px;
            float: right;
        }

        #tag_add_cancel:hover{
            background-color: #c9c9c9;

        }
        #tag_add_confirm:hover{
            background-color: #284c7c;
        }



    </style>
</head>

    <div class="center_idv">

        <div ><span id="clickMe">clickMe</span></div>
        <div >
            <div id="article_source">原</div>
            <div id="tags"> <input id="choice_tags" placeholder="添加添加哈哈哈哈哈哈"></div>
        </div>
        <div id="tagDataList">
          <span>java</span>
          <span>java</span>
          <span>java</span>
          <span>java</span>
          <span>java</span>
          <span>java</span>
          <span>java</span>
        </div>
        <div id="editor"></div>


        <div id="" style="display: none">
            <div class="win_background transparent_class"></div>
            <div id="window_panel">
                <div id="window">
                    <div id="win_head">
                        <span id="win_title">创建标签</span>
                        <a id="win_close" href="javascript:void(0);">×</a>
                    </div>
                    <div id="win_body">
                        <input id="tag_add_name" placeholder="请输入标签名称"/>

                        <textarea id="tag_add_desc" placeholder="请输入标签描述"></textarea>

                        <button id="tag_add_confirm" name="确定">确 定</button>
                        <button id="tag_add_cancel" name="取消" value="取消">取 消</button>
                    </div>
                </div>
            </div>
        </div>


    </div>

</body>
</html>